<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/ccc.css">
</head>
<body>
	<header class="header">
		<!-- 头部左边背景 -->
		<div class="bg"></div>
		<!-- 头部右边链接 -->
		<div class="links">
			<a href="#">了解更多</a>|<a href="#">反馈意见</a>
		</div>
	</header>
	<!-- 内容区 -->
	<section class="content">
		<!-- 内容区头 -->
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>
		<!-- 内容区体 -->
		<div class="mainBody-wrapper">

			<!-- 内容区左边 -->
			<div class="mainBody">
				<div class="regTabs">
					<ul>
					 	<li><a href="#" style="color:#fff; font-weight:bold;">注册字母邮箱</a></li>
					 	<li><a href="#" style="font-weight:bold;">注册手机号码邮箱</a></li>
					 	<li><a href="#" style="font-weight:bold;">注册VIP邮箱</a></li>
					</ul>
				</div>

			   <!-- 注册字母邮箱 -->
				<div class="fegForm">
					<!-- 邮件地址 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" value="+86"  id="phone" class="ipt norWidthIpt" value style="padding-left:35px; width:292px;">
							
							
							<!-- 输入框的 国旗和箭头 -->
							<div class="itl">
								<div class="itl-flag flag-CN">
									<em> &nbsp;</em>
								</div>
							</div>
							<!-- 各国号码下拉菜单 -->
							<div class="itlSelect">

								<a href="#" class="flag-CN"><em></em>中国 +86</a>

								<a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
								<a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
								<a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
								<a href="#" class="flag-AR"><em></em>阿根廷(Argentina) +54</a>
								<a href="#" class="flag-AE"><em></em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
							</div>
							
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a href="#" class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>

				<!-- 注册手机号码邮箱 -->
				<div class="fegForm" style="display:none;">
				手机号码
					<!-- 邮件地址 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" value="+86"  id="phone" class="ipt norWidthIpt" value style="padding-left:35px; width:292px;">
							
							
							<!-- 输入框的 国旗和箭头 -->
							<div class="itl">
								<div class="itl-flag flag-CN">
									<em> &nbsp;</em>
								</div>
							</div>
							<!-- 各国号码下拉菜单 -->
							<div class="itlSelect">

								<a href="#" class="flag-CN"><em></em>中国 +86</a>

								<a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
								<a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
								<a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
								<a href="#" class="flag-AR"><em></em>阿根廷(Argentina) +54</a>
								<a href="#" class="flag-AE"><em></em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
							</div>
							
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a href="#" class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>


				<!-- 注册VIP邮箱邮箱 -->
				<div class="fegForm" style="display:none;">
				vip
					<!-- 邮件地址 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" value="+86"  id="phone" class="ipt norWidthIpt" value style="padding-left:35px; width:292px;">
							
							
							<!-- 输入框的 国旗和箭头 -->
							<div class="itl">
								<div class="itl-flag flag-CN">
									<em> &nbsp;</em>
								</div>
							</div>
							<!-- 各国号码下拉菜单 -->
							<div class="itlSelect">

								<a href="#" class="flag-CN"><em></em>中国 +86</a>

								<a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
								<a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
								<a href="#" class="flag-AF"><em></em>阿富汗(Republic of Afghanistan) +93</a>
								<a href="#" class="flag-AR"><em></em>阿根廷(Argentina) +54</a>
								<a href="#" class="flag-AE"><em></em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
							</div>
							
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 -->
					<dl class="regForm-item">
						<!-- 文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a href="#" class="btnReg">立即注册</a>
						</dd>
					</dl>
				</div>
				
			</div>

			<!-- 内容区右边 -->
			<div class="mainBody-side">
				<div class="regExt">
					<img src="images/reg_master.gif" />
				</div>
			</div>
		</div>
	</section>


	
	<script type="text/javascript" src="jQuery1.0.js"></script>
	<script type="text/javascript">

		// 号码输入框 国旗下拉菜单  实现切换
		function itlSelect(){
			/**1.找到下拉框里面的<a>标签*/
			var links=document.querySelectorAll(".itlSelect");

			/**2.找到<a>标签  绑定点击事件*/
			for (var i = 0; i < links.length; i++) {
				links[i].addEventListener('click',function(e){
					var a=e.target;
					/*获取<a>标签的文本内容*/
					var txt=a.innerText;
					/*获取<a>标签的class类名*/
					var cls=a.getAttribute("class");
					// console.log(cls);
					/*获取+号在文本里面的位置*/

					// 截取字符串，获取“地区编码值”
					var area=txt.substr(txt.indexOf("+"), txt.length-txt.indexOf("+"));

					// 设置输入框的“地区编码值”
					// document.querySelector('#phone').setAttribute('value',area);
					$('#phone').attr('value',area);

					// 设置input输入框的国旗标志
					var p = document.querySelector('.itl-flag');
					p.className="itl-flag " + cls;				

				})

			}
		}
		itlSelect();

		//号码输入框 国旗的显示和隐藏
		function switchFlag(){
			var flag = document.querySelector('.itl');
			// 为flag设定一个单击事件，点击后执行一个函数
			flag.addEventListener('click',function(e){
				// 谁是响应点击事件
				var d =e.target;
				var itlSelect =document.querySelector('.itlSelect');
				// 三元运算符，和if eles 同理
				itlSelect.style.display==='none'?itlSelect.style.display='block':itlSelect.style.display='none';
			})
		}
		switchFlag();

		// 邮箱登录切换效果
		function swichTab(){
			// 找到类名为regTabs里面的ul里面的li里的所有a标签
			var tabs = document.querySelectorAll('.regTabs ul li a');
			// console.log(Tabs.length);
			var ul = document.querySelector('.regTabs ul');
			
			var panels =document.querySelectorAll(".fegForm");
			var img =document.querySelector(".regExt img");
			

			for (var i = 0; i < tabs.length; i++) {
				// 给所有a添加编号
				tabs[i].index = i;
				panels[i].index=i;

				tabs[i].addEventListener('click',function(e){
					// 当前点击到的li节点
					var item =e.target;
					// console.log(item.index);
					// 通过修改背景图片来实现切换效果
					ul.style.background="url(images/tab.jpg) 0 -"+item.index*55.5+'px';

					// 把所有a标签字体颜色变成黑色
					for (var j = 0; j < tabs.length; j++) {
						tabs[j].style.color="#000";
						// 把所有表单隐藏掉
						panels[j].style.display='none';
					}
					// 再将点击到的a字体颜色变成白色
					item.style.color="#fff";

					panels[item.index].style.display='block';

					// 改变右侧广告栏的图片
					if (item.index==2) {
						img.setAttribute('src','images/reg_vip_163.gif');
					} else {
						img.setAttribute('src','images/reg_master.gif');
					}
				})
			}
		}
		swichTab();

		// function ttt(){
		// 	var t =document.querySelectorAll(".fegForm");
		// 	// console.log(t);
		// }

	</script>
</body>
</html>